<!--
 * @Author: NieYB
 * @LastEditors: NieYB
 * @Date: 2021-03-06 11:28:43
 * @LastEditTime: 2021-03-08 19:05:34
 * @Email: 18642124585@163.com
 * @FilePath: \hm-web\src\views\home\articleList.vue
 * @Environment: Win 8.1 javaScript
 * @Description: 模块初始化
-->
<template>
  <!-- 频道内容排版 -->
  <div class="scroll-wrapper">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="article in list"
          :key="article.art_id.toString()"
          :title="article.title"
          @click="$router.push('/article/' + item.art_id.toString())"
        >
          <div slot="label">
            <!-- 图片区域
          column-num： 用来等分几列，有几张图就有几列
          -->
            <van-grid
              :column-num="article.cover.images.length"
              v-if="article.cover.images.length"
            >
              <van-grid-item
                v-for="(url, id) in article.cover.images"
                :key="id"
              >
                <van-image :src="url" />
              </van-grid-item>
            </van-grid>

            <!-- 文字区域 -->
            <div class="meta">
              <span>{{article.aut_name}}</span>
              <span>{{article.comm_count}}评论</span>
              <span>{{article.pubdate}}</span>
              <span
                class="close"
                v-if="$store.state.tokeninof.token"
                @click="isMoreAction(article)"
              >
                <van-icon
                  name="close"
                />
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <!-- 更多操作-弹层 -->
    <van-popup
      v-model="isShowMoreAction"
      :style="{ width: '80%' }"
    >
      <!-- 视图组件 -->
      <more-action ref="moreAction" @report="hReport" @call-like="hReport"></more-action>
    </van-popup>
  </div>
</template>

<script>
import { userArticleLike, report } from '@/api/channel.js'
import { getChannelArticles } from '../../api/article.js'
import MoreAction from '../home/moreAction.vue'
export default {
  name: 'articleList',
  props: ['channel'],
  components: {
    MoreAction
  },
  data () {
    return {
      articleId: '',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      isShowMoreAction: false, // 是否显示弹层组件
      timestamp: Date.now()
    }
  },
  filters: {

  },
  created () {
    // this.onLoad()
  },
  methods: {
    // 对文章不感兴趣 AND 用户举报文章
    async hReport (typeId = null) {
      // console.log(typeId)
      try {
        // 1. 调用接口，传文章编号
        const res = await typeId === null ? userArticleLike(this.articleId) : report(this.articleId, typeId)
        console.log(res)
        // 2. 关闭弹层
        this.isShowMoreAction = false
        // 3. 删除这个文章
        this.removeArticle(this.articleId)
        this.$toast.success('举报成功')
      } catch (err) {
        this.$toast.fail('举报失败')
      }
    },
    // 在当前的list中去删除这个articleId的文章
    removeArticle (articleId) {
      // 1. 找这个文章在list中的下标
      // findIndex:如果找到就返回下标，如果找不到，就返回-1
      const idx = this.list.findIndex(article => article.art_id.toString() === articleId)
      if (idx === -1) {
        // 找不到
        return
      }
      // 2. 删除它
      this.list.splice(idx, 1)
    },

    // 获取id,用户点击
    isMoreAction (article) {
      this.isShowMoreAction = true
      console.log(article.art_id.toString())
      if (this.$refs.moreAction) {
        console.log(this.$refs.moreAction)
        this.$refs.moreAction = false
      }
      this.articleId = article.art_id.toString()
    },
    // 获取频道新闻推荐_V1.1
    async onLoad () {
      try {
        const rs = await getChannelArticles(this.channel.id, this.timestamp, 1)
        const arr = rs.data.data.results
        this.timestamp = rs.data.data.pre_timestamp
        this.list.push(...arr)
        this.loading = false
        if (arr.length === 0) {
          this.finished = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 上拉刷新
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
  display: flex;
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
